<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/bottom.css">
		<link rel="stylesheet" href="css/top.css">
		<link rel="stylesheet" href="css/Commoditydetails.css">
	</head>
	<body>
		<!-- top 顶部的一长条 -->
		<div class="top">
			<div class="tops">
				<div class="top-left">
					<a href="">
						<div class="topleft1">
							<div class="topleft1-size">小米商城</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">MIUI</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">loT</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">云服务</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">金融</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">有品</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">小爱开放平台</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">政企服务</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">下载app</div>
							<div class="topleft1-size1">丨</div>
						</div>
						<div class="topleft1">
							<div class="topleft1-size">Select Region</div>
						</div>
					</a>
				</div>
				<a href="">
					<div class="car-right">
						<i class="iconfont">&#xe64c;</i>购物车（0）
					</div>
					<div class="car-left">
						<a href="Sign in.html"><span>登陆</span></a>
						<span>|</span>
						<span>注册</span>
						<span>|</span>
						<span>消息通知</span>
					</div>
				</a>
			</div>
		</div>
		<!-- first开始 -->
		<div class="first">
			<div class="one">
				<a href="index.html"><img src="img/小米logo.png" alt=""></a>
			</div>
			<div class="two">
				<div class="left">
					<div class="text">全部商品分类</div>
					<div class="text">红米</div>
					<div class="text">电视</div>
					<div class="text">笔记本</div>
					<div class="text">家电</div>
					<div class="text">新品</div>
					<div class="text">路由器</div>
					<div class="text">智能硬件</div>
					<div class="text">服务</div>
					<div class="text">社区</div>
				</div>
				<div class="right">
					<div class="a">
						<input type="text" />
						<div class="tishi">
							<div>小米8</div>
							<div class="item">小米8</div>
							<div>小米8</div>
						</div>
					</div>
					<div class="b">
						<img src="img/b.png" alt="">
					</div>
					<div class="xianshi">
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>
						<li>
							<span>小米6x</span>
							<span>约有6件</span>
						</li>

					</div>
				</div>
			</div>
		</div>
		<div class="second">
			<div class="second-con">
				<ul class="second-big-box">
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="img/r.png" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="img/r.png" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="img/r.png" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="img/r.png" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box last">
							<img src="img/r.png" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li></li>
					<li></li>


					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box last">
							<img src="//i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li></li>
					<li></li>

					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1531878001.22998509!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1531878001.22998509!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1531878001.22998509!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1531878001.22998509!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box last">
							<img src="//i1.mifile.cn/a1/pms_1531878001.22998509!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li></li>
					<li></li>

					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box last">
							<img src="//i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li></li>
					<li></li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box">
							<img src="//i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li>
						<div class="new">新品</div>
						<div class="img-box last">
							<img src="//i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg" alt="">
						</div>
						<div class="text1">小米MIX 3</div>
						<div class="text2">3999元起</div>
					</li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		<!-- 导航结束 -->
		<!-- 商品名称开始 -->
		<div class="goodsname">
			<div class="goodsnames">
				<div class="goodsnames1">小米8 青春版</div>
				<div class="goodsnames2">
					<div>概述</div>
					<div>|</div>
					<div>图集</div>
					<div>|</div>
					<div>参数</div>
					<div>|</div>
					<div>F码通道</div>
					<div>|</div>
					<div>用户评价</div>
				</div>
			</div>
		</div>
		<!-- 商品名称结束 -->
		<!-- 商品详情开始 -->
		<div class="xiangqing">
			<div class="xiangqing1">
				<div class="aaa">
					<div class="active"><img src="//i8.mifile.cn/a1/pms_1537323994.23521386.jpg" alt=""></div>
					<div><img src="//i8.mifile.cn/a1/pms_1537323963.2662931.jpg" alt=""></div>
					<div><img src="//i8.mifile.cn/a1/pms_1537323963.40512928.jpg" alt=""></div>
					<div><img src="//i8.mifile.cn/a1/pms_1537323963.1278763.jpg" alt=""></div>
				</div>
				<div class="changtiao">
					<div class="active"></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="banner-jiantouleft">
					<div><i class="iconfont">&#xe6a5;</i></div>
				</div>
				<div class="banner-jiantouright">
					<div><i class="iconfont">&#xe658;</i></div>
				</div>
			</div>
			<div class="xiangqing2">
				<div class="xiangqing2s">
					<div class="xiangqing2s1">
						<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/909cc85f3cd0a1baae4eecceb6e315cf.jpg" alt="">
						<span>小米8 青春版</span>
					</div>
					<div class="xiangqing2s2">
						<span>潮流镜面渐变色 / 2400万自拍旗舰 / 7.5mm超薄机身 / 6.26"小刘海全面屏 / AI裸妆美颜 / 骁龙660AIE处理器</span>
					</div>
					<div class="xiangqing2s3">小米自营</div>
					<div class="xiangqing2s4">1699元</div>
					<div class="xiangqing2s5">
						<div><i class="iconfont">&#xe60d;</i><span>闪购</span></div>
						<div>剩13时57分19秒</div>
					</div>
					<div class="xiangqing2s6"><span>￥1599元</span><s>￥1999元</s></div>
					<div class="xiangqing2s7">
						<i class="iconfont">&#xe614;</i>
						<div><span>山西</span>
							<span>晋城市</span>
							<span>城区</span>
							<span>西上庄</span>
							<span>修改</span></div>
						<div>有现货</div>
					</div>
					<div class="xiangqing2s8">选择版本</div>
					<div class="xiangqing2s9">
						<div><span>6GB+64GB全网通</span><span>1599元</span></div>
						<div><span>6GB+64GB全网通</span><span>1599元</span></div>
						<div><span>6GB+64GB全网通</span><span>1599元</span></div>
						<div><span>6GB+64GB全网通</span><span>1599元</span></div>
					</div>
					<div class="xiangqing2s8">选择颜色</div>
					<div class="xiangqing2s10">
						<div><img src="https://i8.mifile.cn/a1/pms_1537323994.03296551.jpg" alt=""><span>深空灰</span></div>
						<div><img src="https://i8.mifile.cn/a1/pms_1537323994.03296551.jpg" alt=""><span>梦幻蓝</span></div>
						<div><img src="https://i8.mifile.cn/a1/pms_1537323994.03296551.jpg" alt=""><span>暮光金</span></div>
					</div>
					<div class="xiangqing2s11">
						<div class="xiangqing2s11-1"><span>选择小米提供的延长保修</span><span>了解延长保修 ></span></div>
						<div class="xiangqing2s11-2">
							<input type="radio" name="" id="" value="" />
							<img src="//i1.mifile.cn/a1/pms_1537265392.26335954.jpg?width=50&height=50" alt="">
							<div>
								<span>全年意外保障服务</span>
								<span>手机意外掉落/进水/碾压等损坏</span>
								<div><input type="checkbox" name="" id="" value="" /><span>我已阅读</span><span>服务条款</span><span>|</span><span>常见问题</span></div>
							</div>
							<span>99元</span>
						</div>
					</div>
					<div class="xiangqing2s12">
						<div class="xiangqing2s12-1"><span>小米8 青春版 6GB+64GB 深空灰</span><span>1599元<s>1699元</s></span></div>
						<div class="xiangqing2s12-2">闪购价： 1599元</div>
					</div>
					<div class="xiangqing2s13">
						<div class="xiangqing2s13-1">登录后购买</div>
						<div class="xiangqing2s13-2"><i class="iconfont">&#xe623;</i><span>喜欢</span></div>
					</div>
					<div class="xiangqing2s14">
						<div><i class="iconfont">&#xe627;</i><span>小米自营</span></div>
						<div><i class="iconfont">&#xe627;</i><span>小米发货</span></div>
						<div><i class="iconfont">&#xe627;</i><span>7天无理由退货</span></div>
						<div><i class="iconfont">&#xe627;</i><span>运费说明</span></div>
						<div><i class="iconfont">&#xe627;</i><span>售后服务政策</span></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品详情结束 -->

		<!-- 底部开始 -->
		<div class="bottom">
			<div class="bottom1">
				<div class="bottom1s"><i class="iconfont">&#xe65a;</i><span>预约维修服务</span></div>
				<div class="bottom1s"><i class="iconfont">&#xe63a;</i><span>7天无理由退货</span></div>
				<div class="bottom1s"><i class="iconfont">&#xe638;</i><span>15天免费换货</span></div>
				<div class="bottom1s"><i class="iconfont">&#xe64d;</i><span>满150元包邮</span></div>
				<div class="bottom1s"><i class="iconfont">&#xe614;</i><span>520余家售后网点</span></div>
			</div>
			<div class="bottom2">
				<div class="bottom2a">
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
					<div class="bottom2a1">
						<div>帮助中心</div>
						<div>账户管理</div>
						<div>购物指南</div>
						<div>订单操作</div>
					</div>
				</div>
				<div class="bottom2b">
					<div>400-100-5678</div>
					<div>周一至周日 8:00-18:00</div>
					<div>(仅收市话费)</div>
					<div class="bottom2bs">
						<i class="iconfont">&#xe628;</i><span>联系客服</span>
					</div>
				</div>
			</div>

		</div>
		<!-- 底部结束 -->
		<script>
			//商品详情轮播
			let xqLnbLis = document.querySelectorAll(".xiangqing1 .aaa>div");
			let xqLeft = document.querySelector(".banner-jiantouleft");
			let xqRight = document.querySelector(".banner-jiantouright");
			let xqPonitLis = document.querySelectorAll(".changtiao>div");
			let xqSize = xqPonitLis.length - 1;
			let xqLunN = 0;
			let time = setInterval(function() {
				xqLunN++;
				xqMove();
			}, 3000);
			xqRight.onmousedown = function() {
				clearInterval(time);
				xqLunN++;
				xqMove();
			}
			xqRight.onmouseup = function() {
				time = setInterval(function() {
					xqLunN++;
					xqMove();
				}, 3000);
			}
			xqLeft.onmousedown = function() {
				clearInterval(time);
				xqLunN--;
				xqMove();
			}
			xqLeft.onmouseup = function() {
				time = setInterval(function() {
					xqLunN++;
					xqMove();
				}, 3000);
			}

			function xqMove() {
				if (xqLunN > xqSize) {
					xqLunN = 0;
				} else if (xqLunN < 0) {
					xqLunN = xqSize;
				}
				xqLnbLis.forEach((val, index) => {
					val.classList.remove("active");
					xqPonitLis[index].classList.remove("active");
				})
				xqLnbLis[xqLunN].classList.add("active");
				xqPonitLis[xqLunN].classList.add("active");
			}
			//input获得焦点
			let xqInput = document.querySelector(".first .two .right .a input");
			let xqInTi = document.querySelector(".first .two .right .xianshi");
			let xqInTis = document.querySelector(".tishi");
			let xqInA = document.querySelector(".first .two .right .a");
			let xqInB = document.querySelector(".first .two .right");
			xqInput.onfocus = function() {
				xqInTis.style.display = "none";
				xqInTi.style.display = "block";
				xqInA.classList.add("act");
				xqInB.style.border = "1px solid #ff6700";
			}
			xqInput.onblur = function() {
				xqInTis.style.display = "block";
				xqInTi.style.display = "none";
				xqInA.classList.remove("act");
				xqInB.style.border = "1px solid #e0e0e0";
			}
			//下拉菜单轮播
			let xqXiaLis = document.querySelectorAll(".first .two .left div");
			let xqYiLis = document.querySelectorAll(".second .second-con ul li");
			let xqYiDong = document.querySelector(".second .second-con ul");
			let xqian = document.querySelector(".first .two .left");
			let xqNone = document.querySelector(".second");
			let xqNone1 = document.querySelector(".second .second-con");
			xqian.onmouseover = function() {
				xqNone.style.height = "300px";
				xqNone1.style.height = "300px";
			}
			xqian.onmouseout = function() {
				xqNone.style.height = "0px";
				xqNone1.style.height = "0px";
			}
			xqYiDong.onmouseover = function() {
				xqNone.style.height = "300px";
				xqNone1.style.height = "300px";
			}
			xqYiDong.onmouseout = function() {
				xqNone.style.height = "0px";
				xqNone1.style.height = "0px";
			}
			xqXiaLis.forEach((val, index) => {
				val.onmouseover = function() {
					// 				    if(index>=5){
					// 						 xqNone.style.height="0px";
					// 						 xqNone1.style.height="0px";
					// 					}
					let xqSize2 = 7 * xqYiLis[0].offsetWidth;
					xqYiDong.style.left = -xqSize2 * index + "px";
				}
			})
		</script>
	</body>
</html>
